<template>
  <!-- 日期型组件显示 -->
  <span v-if="showType == 'date'">
    <template v-if="range">
      {{
        typeof value == "undefined" ? "" : $moment(value[0]).format(format)
      }}
      至 {{ $moment(value[1]).format(format) }}
    </template>
    <template v-else>{{
      typeof value == "undefined" ? "" : $moment(value).format(format)
    }}</template>
  </span>
  <!-- 评分组件显示 -->
  <span v-else-if="showType == 'rate'">
    <el-rate
      v-model="value"
      disabled
      show-score
      text-color="#ff9900"
      :size="size"
      score-template="{value}"
    >
    </el-rate>
  </span>
  <!-- 范围滑块组件显示 -->
  <span v-else-if="showType == 'slider'">
    {{ typeof value == "undefined" ? "" : value[0] }}{{ unit }} 至 {{ value[1]
    }}{{ unit }}
  </span>
  <!-- 字典组件显示 -->
  <span v-else-if="showType == 'dict'">
    <template v-if="multiple">
      <template v-if="type == 'select'">
        <el-tag
          v-for="(item, i) in value"
          :key="i"
          :size="size"
          class="dict-item"
        >
          {{ getTitle(item) }}
        </el-tag>
      </template>
      <template v-if="type == 'cascader'">
        <el-tag
          v-for="(item, i) in value"
          :size="size"
          :key="i"
          class="dict-item"
        >
          {{ getTitle(item) }}
        </el-tag>
      </template>
    </template>
    <template v-else>
      <template v-if="type == 'check'">
        <el-tag
          v-for="(item, i) in value"
          :key="i"
          :size="size"
          class="dict-item"
        >
          {{ getTitle(item) }}
        </el-tag>
      </template>
      <addre-info v-else-if="type == 'addre'" v-model="value" />
      <el-tag v-else-if="value!='' && typeof value!='undefined'" class="dict-item" :size="size">
        {{ getTitle(value) }}
      </el-tag>
    </template>
  </span>
  <!-- 图像组件显示 -->
  <div v-else-if="showType == 'img' && !multiple">
    <el-image class="avatar" :src="value.url" :preview-src-list="[value.url]">
      <img src="../../assets/noImg.png" slot="error" class="avatar" />
    </el-image>
  </div>
  <div v-else-if="showType == 'img' && multiple">
    <el-image class="avatar" :src="value[0].url" :preview-src-list="getImgList">
      <img src="../../assets/noImg.png" slot="error" class="avatar" />
    </el-image>
  </div>
  <!-- 上传组件显示 -->
  <div v-else-if="showType == 'upload'" style="display:grid;">
    <div class="download-list" v-for="(item, i) in value" :key="i">
      <div class="filename">
        <el-link icon="el-icon-document"> {{ item.name }}</el-link>
      </div>
      <div class="link">
        <el-link :href="item.url" icon="el-icon-download">下载</el-link>
      </div>
    </div>
  </div>
  <!-- 密码组件显示 -->
  <span v-else-if="showType == 'password'">********</span>
  <!-- 其他可以直接显示的组件 -->
  <span v-else
    >{{ typeof value == "undefined" ? "" : value
    }}{{ typeof value == "undefined" ? "" : unit }}</span
  >
</template>
<script>
import AddreInfo from "../base/AddreInfo.vue";

const dateFormat = ["time", "date", "datetime", "year", "month", "week"];
const dict = ["radio", "check", "select", "addre", "cascader"];
const type = [
  "text",
  "textarea",
  "password",
  "switch",
  "number",
  "slider",
  "rate",
  "color",
  "time",
  "date",
  "datetime",
  "year",
  "month",
  "week",
  "radio",
  "check",
  "select",
  "upload",
  "img",
  "cascader",
  "auto",
  "addre",
  "sfzh",
  "email",
  "mobile",
];
export default {
  components: { AddreInfo },
  props: {
    value: {
      type: [String, Number, Array, Boolean, Date, Object],
      required: true,
    },
    type: {
      type: String,
      validator: function(value) {
        return type.findIndex((item) => item == value) >= 0;
      },
    },
    size: {
      type: String,
      validator: function(value) {
        return (
          ["medium", "small", "mini"].findIndex((item) => item == value) >= 0
        );
      },
      default: "medium",
    },
    multiple: { type: Boolean, default: false },
    dictName: String,
    range: { type: Boolean, default: false },
    showSecond: { type: Boolean, default: false },
    ellipsis: Number,
    unit: String,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getTitle(code) {
      if (typeof code != "undefined" && typeof this.list != 'undefined') {
        const item = this.list.find((row) => row.code == code);
        if (typeof item == "object") {
          if (item.hasOwnProperty("title")) {
            return item.title;
          }
        } else {
          return code;
        }
      } else {
        return "";
      }
    },
  },
  computed: {
    showType() {
      if (dateFormat.indexOf(this.type) >= 0) {
        return "date";
      } else if (dict.indexOf(this.type) >= 0) {
        return "dict";
      } else if (this.type == "slider" && this.range) {
        return "slider";
      } else if (
        this.type == "img" ||
        this.type == "upload" ||
        this.type == "rate" ||
        this.type == "password"
      ) {
        return this.type;
      } else {
        return "direct";
      }
    },
    format() {
      if (this.showType == "date") {
        if (this.type == "time") {
          if (this.showSecond) {
            return "HH:mm:ss";
          } else {
            return "HH:mm";
          }
        } else if (this.type == "date") {
          return "YYYY-MM-DD";
        } else if (this.type == "datetime") {
          return "YYYY-MM-DD HH:mm:ss";
        } else if (this.type == "year") {
          return "YYYY";
        } else if (this.type == "month") {
          return "YYYY-MM";
        } else if (this.type == "week") {
          return "yyyy 第 WW 周";
        }
      }
    },
    getImgList(){
      if (this.type=="img" && this.multiple){
        if (typeof this.value != 'undefined'){
          let list = []
          for (let i=0;i<this.value.length;i++){
            list.push(this.value[i].url)
          }
          return list
        }
      }
      return []
    }
  },
  async created() {
    if (typeof this.dictName != 'undefined'){
      this.list = await this.$dict.getList(this.dictName);
    }
  },
};
</script>

<style lang="less" scoped>
.avatar {
  width: 148px;
  height: 148px;
  display: block;
  border-radius: 5px;
}
.download-list {
  display: flex;
  border-radius: 3px;
  border: 1px solid #dae9f2;
  padding-left: 10px;
  padding-right: 10px;
  margin: 3px;
  background-color: #ecf4f9;
  line-height: 30px;
  height: 30px;
  .filename {
    width: 100%;
    .el-link {
      height: 16px;
    }
  }
  .link {
    text-align: center;
    width: 100px;
    flex: 0 0 100px;
    justify-content: flex-end;
    .el-link {
      height: 16px;
    }
  }
}
.dict-item {
  margin-left: 5px;
  margin-right: 5px;
}
</style>
